<script setup lang="ts">
import { marked } from 'marked'
import { ref, computed } from 'vue'

const input = ref('# hello')

const output = computed(() => marked(input.value))

const update = (e: { target: { value: string } }) => {
  input.value = e.target.value
}

const handleTest = () => {
  fetch('/api/cats', {
    method: 'post',
  }).then(res => res.json()).then((data) => {
    console.log(data)
  })
}
</script>

<template>
  <div class="markdown-body">
    <div class="editor">
    <textarea class="input" :value="input" @input="update"></textarea>
    <div class="output" v-html="output"></div>
  </div>
  </div>
  <!-- <button @click="handleTest">测试</button> -->
 
</template>

<style>
body {
  margin: 0;
}

.editor {
  height: 100vh;
  display: flex;
}

.input,
.output {
  overflow: auto;
  width: 50%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}

.input {
  border: none;
  border-right: 1px solid #ccc;
  resize: none;
  outline: none;
  background-color: #f6f6f6;
  font-size: 14px;
  font-family: 'Monaco', courier, monospace;
  padding: 20px;
}

code {
  color: #f66;
}
</style>
